<template>
    <el-dialog v-model="visible" @close="closePage" :title="title" width="35%">
        <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px" size="large">
            <el-form-item label="角色码" prop="code">
                <el-input v-model="formData.code" placeholder="请输入角色码" />
            </el-form-item>
            <el-form-item label="角色名" prop="name">
                <el-input v-model="formData.name" placeholder="请输入角色名" />
            </el-form-item>
            <el-form-item label="权限范围" prop="dataScope">
                <el-select v-model="formData.dataScope" placeholder="请选择权限范围" :clearable="true" :filterable="true">
                    <el-option v-for="(item, index) in dataScopeList" :label="item.label" :value="item.value"
                        :key="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
            </el-form-item>
            <el-form-item label="权限">
                <div style="max-height: calc(100vh - 600px);overflow: auto;width:100%">
                    <el-tree :data="permsList" :props="permsTreeProps" node-key="id" :default-checked-keys="hasPerms"
                        show-checkbox default-expand-all ref="permsTreeRef" />
                </div>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closePage">取消</el-button>
                <el-button type="primary" @click="addOrUpdate">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import { addReq, updateReq } from "@/api/sys/role/index.js"
import { queryTreeAllReq, getPermIdsByRoleIdReq } from "@/api/sys/perm/index.js"
import { success } from '@/utils/messageUtils.js';
const props = defineProps({
    querySelective: Function,
})

const { proxy } = getCurrentInstance()

const formRef = ref()
const formData = reactive({
    id: null,
    code: '',
    name: '',
    remark: '',
    dataScope:''
})

const formRules = {
    code: [{ required: true, message: '请输入角色码', trigger: 'blur' }],
    name: [{ required: true, message: '请输入角色名', trigger: 'blur' }],
    dataScope: [{ required: true, message: '请选择数据范围', trigger: 'blur' }],
}

// 打开dialog
const permsTreeProps = ref({
    children: 'children',
    label: 'name',
    value: 'id'
})

const dataScopeList = ref([{label:'本人',value:'1'},{label:'本部门',value:'2'},{label:'所有数据',value:'3'}])
const permsList = ref([])
const title = ref()
const isAdd = ref(true)
const hasPerms = ref([])
const visible = ref(false)
const open = (row) => {
    Promise.all([
        queryTreeAllReq(),
    ]).then(([treeAllRes
    ]) => {
        permsList.value = treeAllRes.data;
        // 重置表单
        formRef.value?.resetFields()
        if (row) {
            title.value = '修改角色'
            isAdd.value = false

            formData.id = row.id
            formData.code = row.code
            formData.name = row.name
            formData.remark = row.remark
            formData.dataScope = row.dataScope
            // 查询角色具有的权限
            hasPerms.value = []
            getPermIdsByRoleIdReq(row.id).then(res => {
                if (res.code == 200) {
                    hasPerms.value = res.data
                }
            })
        } else {
            title.value = '添加角色'
            isAdd.value = true

            formData.id = null
            formData.code = ''
            formData.name = ''
            formData.remark = ''
            formData.dataScope = ''

            // 清空选中
            proxy.$refs.permsTreeRef?.setCheckedKeys([])
        }
        visible.value = true;
    });
}

defineExpose({
    open,
})

// 关闭dialog
const closePage = () => {
    visible.value = false;
}

// 修改
const addOrUpdate = () => {
    formRef.value.validate((valid, fields) => {
        if (valid) {
            formData.permIds = proxy.$refs.permsTreeRef.getCheckedKeys()
            if (isAdd.value) {
                addReq(formData).then(res => {
                    if (res.code == 200) {
                        success(res.message);
                        props.querySelective();
                        closePage();
                    }
                })
            } else {
                updateReq(formData).then(res => {
                    if (res.code == 200) {
                        success(res.message);
                        props.querySelective();
                        closePage();
                    }
                })
            }
        }
    })
}
</script>@/api/sys/perm/index.js